<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">
    <el-input v-model="patient.name" placeholder="姓名" style="width: 180px"
              suffix-icon="el-icon-date"></el-input>
    <el-input v-model="patient.certificatesNo" placeholder="证件编号" style="width: 180px"
              suffix-icon="el-icon-date"></el-input>
    <el-input v-model="patient.phone" placeholder="手机" style="width: 180px"
              suffix-icon="el-icon-date"></el-input>
    <el-button type="primary" @click="selectPatient">查&ensp;询</el-button>
    <el-button type="primary" plain @click="insertDialog = true">新&ensp;增</el-button>
    <template>
        <el-table
                :data="tableData.records"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="userid"
                    label="用户id"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="certificatesType"
                    label="证件类型">
            </el-table-column>
            <el-table-column
                    prop="certificatesNo"
                    label="证件编号">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="birthdate"
                    label="出生年月"
                    :formatter="formatDate">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机">
            </el-table-column>
            <el-table-column
                    prop="isMarry"
                    label="是否结婚">
            </el-table-column>
            <el-table-column
                    prop="provinceCode"
                    label="省code">
            </el-table-column>
            <el-table-column
                    prop="cityCode"
                    label="市code">
            </el-table-column>
            <el-table-column
                    prop="districtCode"
                    label="区code">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="详情地址">
            </el-table-column>
            <el-table-column
                    prop="contactsName"
                    label="联系人姓名">
            </el-table-column>
            <el-table-column
                    prop="contactsCertificatesType"
                    label="联系人证件类型">
            </el-table-column>
            <el-table-column
                    prop="contactsCertificatesNo"
                    label="联系人证件号">
            </el-table-column>
            <el-table-column
                    prop="contactsPhone"
                    label="联系人手机">
            </el-table-column>
            <el-table-column
                    prop="cardNo"
                    label="就诊卡号">
            </el-table-column>
            <el-table-column
                    prop="isInsure"
                    label="是否有医保">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="更新时间">
            </el-table-column>
            <el-table-column label="操作">
                <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
                <template slot-scope="scope">
                    <!-- 编辑 执行的函数 handleEdit,索引和整个数据行"对象"-->
                    <el-button type="primary" icon="el-icon-edit"
                               @click="handleUpdate(scope.$index, scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
                </template>
            </el-table-column>

        </el-table>
    </template>
    <template>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total">
            </el-pagination>
        </div>
    </template>
    <!--修改信息弹窗-->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible" :before-close="handleClose">
        <el-form :model="updatePatient">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="updatePatient.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="updatePatient.phone" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="update()">确 定</el-button>
        </div>
    </el-dialog>

    <!--新增弹窗-->
    <el-dialog title="新增信息" :visible.sync="insertDialog" :before-close="handleClose">
        <!--autocomplete="off" 表示不记录输入过信息的方法-->
        <el-form :model="insertPatient" autocomplete="off">
            <el-form-item label="用户Id" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.userid"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.name"></el-input>
            </el-form-item>
            <el-form-item label="证件类型" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.certificatesType"></el-input>
            </el-form-item>
            <el-form-item label="证件编号" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.certificatesNo"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-radio v-model="insertPatient.sex" label="1">男</el-radio>
                <el-radio v-model="insertPatient.sex" label="0">女</el-radio>
            </el-form-item>
            <el-form-item label="出生年月" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="insertPatient.birthdate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.phone"></el-input>
            </el-form-item>
            <el-form-item label="是否结婚" :label-width="formLabelWidth">
                <el-radio v-model="insertPatient.isMarry" label="1">是</el-radio>
                <el-radio v-model="insertPatient.isMarry" label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="省code" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.provinceCode"></el-input>
            </el-form-item>
            <el-form-item label="市code" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.cityCode"></el-input>
            </el-form-item>
            <el-form-item label="区code" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.districtCode"></el-input>
            </el-form-item>
            <el-form-item label="详情地址" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.address"></el-input>
            </el-form-item>
            <el-form-item label="联系人姓名" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.contactsName"></el-input>
            </el-form-item>
            <el-form-item label="联系人证件类型" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.contactsCertificatesType"></el-input>
            </el-form-item>
            <el-form-item label="联系人证件号" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.contactsCertificatesNo"></el-input>
            </el-form-item>
            <el-form-item label="联系人手机" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.contactsPhone"></el-input>
            </el-form-item>
            <el-form-item label="就诊卡号" :label-width="formLabelWidth">
                <el-input v-model="insertPatient.cardNo"></el-input>
            </el-form-item>
            <el-form-item label="是否有医保" :label-width="formLabelWidth">
                <el-radio v-model="insertPatient.isInsure" label="1">是</el-radio>
                <el-radio v-model="insertPatient.isInsure" label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="状态（是否认证）" :label-width="formLabelWidth">
                <el-radio v-model="insertPatient.status" label="1">是</el-radio>
                <el-radio v-model="insertPatient.status" label="0">否</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="insert">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            patient: {
                name: '',
                certificatesNo: '',
                phone: ''
            },
            updatePatient: {},
            insertPatient: {},
            tableData: [],
            pageSize: 2,//每页多少数据
            currentPage: 1,  //默认当前页为第一页
            dialogFormVisible: false,
            insertDialog: false,
            formLabelWidth: '150px'
        },
        methods: {
            selectPatient() {
                if (this.name === '' && this.certificatesNo === '' && this.phone === '') {
                    return;
                }
                this.currentPage = 1;
                //模糊查询 获取病人数据方法
                axios.post("http://localhost:8080/patient/selectByLike?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize, JSON.stringify(this.patient), {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    console.log(res);
                    this.tableData = res.data;
                    console.log(this.tableData.records);
                }).catch(err => {
                    console.log(err);
                })
            },
            getPatientList() {
                //获取病人数据方法
                axios.get('http://localhost:8080/patient/selectByAxios', {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize
                    }
                }).then(res => {
                    console.log(res);
                    this.tableData = res.data;
                    console.log(this.tableData);
                }).catch(err => {
                    console.log(err);
                })
            },
            update() {
                axios.put("http://localhost:8080/patient/updateByAxios", JSON.stringify(this.updatePatient), {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    console.log(res);
                    if (res.data.msg === 'success' && res.data.code === 0) {
                        //提示成功
                        this.$message({
                            showClose: true,
                            message: '修改成功!',
                            type: 'success',
                            center: true
                        });
                        //关闭窗口
                        this.dialogFormVisible = false;
                        //重新加载数据
                        this.getPatientList();
                    } else {
                        this.$message({
                            showClose: true,
                            message: '修改失败!',
                            type: 'error',
                            center: true
                        });
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            insert() {
                axios.post("http://localhost:8080/patient/insertByAxios", JSON.stringify(this.insertPatient), {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    console.log(res);
                    if (res.data.msg === 'success' && res.data.code === 0) {
                        //提示成功
                        this.$message({
                            showClose: true,
                            message: '新增成功!',
                            type: 'success',
                            center: true
                        });
                        //关闭窗口
                        this.insertDialog = false;
                        //重新加载数据
                        this.getPatientList();
                    } else {
                        this.$message({
                            showClose: true,
                            message: '新增失败!',
                            type: 'error',
                            center: true
                        });
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            handleDelete(row) {
                console.log(row.id);
                axios.delete("http://localhost:8080/patient/deleteByAxios?id=" + row.id).then(res => {
                    console.log(res);
                    if (res.data.msg === 'success' && res.data.code === 0) {
                        //提示成功
                        this.$message({
                            showClose: true,
                            message: '删除成功!',
                            type: 'success',
                            center: true
                        });
                        //关闭窗口
                        this.dialogFormVisible = false;
                        //重新加载数据
                        this.getPatientList();
                    } else {
                        this.$message({
                            showClose: true,
                            message: '删除失败!',
                            type: 'error',
                            center: true
                        });
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            handleUpdate(index, row) {
                this.dialogFormVisible = true;
                console.log(index, row);
                this.updatePatient = row;
            },
            // 初始页currentPage、初始每页数据数 pageSize 和数据 tableData
            handleSizeChange(val) {
                this.pageSize = val;
                console.log("this.pageSize=" + this.pageSize)
                //重新获取数据
                this.getPatientList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                console.log("this.currentPage=" + this.currentPage)  //点击第几页
                //重新获取数据
                this.getPatientList();
            },
            handleClose() {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.insertPatient = {};
                        this.updatePatient = {};
                        this.insertDialog = false;
                        this.dialogFormVisible = false;
                    })
                    .catch(_ => {
                    });
            },
            handleCancel() {
                //关闭更新窗口不生效，待修改
                this.updatePatient = {};
                this.insertPatient = {};
                this.insertDialog = false;
                this.dialogFormVisible = false;
            },
            formatDate(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if (data === '') {
                    return ''
                } else {
                    let dt = new Date(data)
                    return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
                }
            },

        },
        mounted() {
            //页面加载时执行该方法
            this.getPatientList();
        }
    })


</script>
</html>